<template>
  <div class="brandLsit" v-if="hasdata==1">
    <img class="brand_bg" src="http://api.eyee.com/EYEE/smallapp/zxbrandbg.png" alt="">
    <v-header>
      <div class="nav-tab2">
        <h3>潮流品牌百科</h3>
      </div>
    </v-header>
    <!--<div class="brandContent" @touchmove.stop.prevent :style="'height:'+screenHeight*0.3+'px'">-->
    <div class="brandContent" v-show="list&&list.length>0">
      <swiper :options="swiperBig" ref='bigSwiper' class="swiperBig">
        <swiper-slide v-for="(item,index) in list" :key='index'>
          <div class="slideItem" :style="'heigth:'+screenHeight*0.9+'px'">
            <div class="headImgs" @click.stop='getBrandInfo(item.id)'>
              <img :src="item.coverurl|https" alt="">
              <!--<img :data-src="item.coverurl" class="swiper-lazy">-->
            </div>
            <div class="boxshow"> </div>
            <div class="imgsLogo">
              <section>
                <img :src="item.logourl|https" alt="">
                <!--<img :data-src="item.logourl" class="swiper-lazy">-->
              </section>
              <p class="ellipsis">{{item.name}}</p>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      </swiper>
      <swiper :options="swiperSmail" ref='smallSwiper' class=" swiperSmail ">
        <swiper-slide v-for="(item,index) in list" :key='index'>
          <div class="smailImg">
            <img :src="item.coverurl|https" alt="">
          </div>
          <div class="titelBg">
            <p class="ellipsis">{{item.name}}</p>
          </div>
        </swiper-slide>
      </swiper>
      <swiper :options="swCode" class="swCode" ref='codeSwiper' v-if='codeList&&codeList.length>0'>
        <swiper-slide v-for="(item,index) in codeList" :key='index'>
          <div @click='codeClick(item,index)'>
            {{item.code}}
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
    <v-error v-else></v-error>
</template>
<script>
  import * as api from '../../../common/api/article'
  import { Storage, APP } from '../../../common/util'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        screenHeight: 'auto',
        swiperBig: {
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          spaceBetween: 10,
          loopedSlides: 1,
          preloadImages: false,
          onSlideChangeStart: (swiper) => { this.onSlideChangeStart(swiper) }
        },
        swiperSmail: {
          loopedSlides: 1, // looped slides should be the same
          spaceBetween: 20,
          centeredSlides: true,
          slidesPerView: 5,
          touchRatio: 0.2,
          preloadImages: false,
          // slideToClickedSlide: true,
          // freeMode: true,
          preventClicks: false,
          onInit: (swiper) => { this.smailInit(swiper) }
        },
        swCode: {
          slidesPerView: 8,
          // paginationClickable: true,
          // slideToClickedSlide: true,
          freeMode: true,
          freeModeMomentumBounce: false, // 禁用反弹
          resistanceRatio: 0, // 无法拖离边界
          centeredSlides: true, // 居中，
          preventClicks: false
        },
        changEnd: false,
        hasdata: 1
      }
    },
    mounted() {
      this.initShare({ type: 0 })
      if (!(this.list && this.list.length > 0)) {
        this.getBrandList()
      } else {
        this.hasdata = 1
      }
      this.screenHeight = screen.height - 50
    },
    computed: {
      bigSwiper() {
        return this.$refs.bigSwiper.swiper
      },
      smallSwiper() {
        return this.$refs.smallSwiper.swiper
      },
      codeSwiper() {
        return this.$refs.codeSwiper.swiper
      },
      ...mapGetters({ list: 'brandList', codeList: 'codeList' })
    },
    methods: {
      getBrandInfo: function (id) {
        this.$router.push('/brandInfo/' + id)
      },
      getIndex(name, index) {
        for (var i = 0; i < this.codeList.length; i++) {
          if (name == this.codeList[i].code || index == this.codeList[i].index) {
            this.codeSwiper.slideTo(i, 100, false)
          }
        }
      },
      codeClick(item, index) {
        this.bigSwiper.slideTo(item.index, 300, false)
      },
      smailInit(swiper) {
        swiper.params.control = this.bigSwiper
        this.bigSwiper.params.control = swiper
      },
      onSlideChangeStart(swiper) {
        this.getIndex(this.list[swiper.activeIndex].name[0], swiper.activeIndex)
      },
      getBrandList() {
        var that = this, codes = []
        api.LibraryBrands().then(function (res) {
          if (res) {
            // console.log('品牌库列表',res)
            that.hasdata = 1
            that.$store.dispatch('getBrandList', res.list)
            that.$store.dispatch('getCodeList', res.list)
          } else {
            that.hasdata = 2
            that.toast('加载失败')
          }
        }).catch(function (err) {
          that.hasdata = 2
          console.error(err)
          that.toast('加载失败')
        })
      }

    }
  }

</script>
<style scoped>
  .brandLsit .brand_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }

  .brandContent {
    z-index: 2;
    height: 100%;
    color: #fff;
  }

  .brandContent li {
    display: inline-block;
  }

  .swCode {
    color: #fff;
  }

  .brandFooter {
    width: 100%;
    padding: 0 20px;
    /*overflow: hidden;*/
  }

  .brandFooter li {
    width: 30px;
    line-height: 30px;
    text-align: center
  }

  .brandContent {
    position: relative;
    overflow: hidden;
  }

  .swiperBig {
    height: 55vh;
    /*margin-top: 30%;*/
    margin-top: 15%;
    margin-bottom: 3%;
    overflow: initial;
  }

  .slideItem {
    width: 75%;
    height: 100%;
    margin: 0px auto;
    background: #fff;
    border-radius: 8px;
    position: relative;
  }

  .boxshow,
  .slideItem .headImgs {
    width: 80%;
    height: 85%;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 8px;
    position: relative;
    transform: translateY(-15%);
    z-index: 2;
  }

  .boxshow {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 0;
    overflow: inherit;
    box-shadow: 2px 2px 10px #999, 0 2px 2px #999;
    z-index: 1;
  }

  .headImgs img {
    width: 100%;
    min-height: 100%;
    border-radius: 8px;
  }

  .slideItem img {
    width: 100%;
  }

  .slideItem .imgsLogo {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 10px;
    text-align: center;
  }

  .imgsLogo section {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #eee;
  }

  .imgsLogo img {
    width: 100%;
    height: 100%;
  }

  .imgsLogo p {
    color: #999;
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    font-size: 0.875rem;
  }

  .swiperBig .swiper-button-prev,
  .swiperBig .swiper-button-next {
    padding: 0 25px;
    background-image: url(//files.eyee.com/mcdn/static/img/brand_left.png);
    background-size: cover;
    width: 21px;
    height: 70px;
    margin-top: -35px;
  }

  .swiperBig .swiper-button-next {
    transform: rotate(180deg)
  }

  .swiperSmail .swiper-slide {
    opacity: 0.5;
    height: 21vw;
    overflow: hidden;
    border-radius: 5px;
    width: 16%;
  }

  .smailImg {
    height: 100%;
    overflow: hidden;
  }

  .smailImg img {
    width: 100%;
    min-height: 100%;
  }

  .swCode .swiper-slide {
    margin-top: 3%;
    opacity: 0.5;
    text-align: center;
  }

  .swiperSmail .swiper-slide-active,
  .swCode .swiper-slide-active {
    opacity: 1;
  }

  .swiper-lazy {
    background-color: #eee;
  }
</style>
